<template>
    <div class="announcement">
        <div class="announcementMain">
            <div class="module swiperList">
                <div class="swiper-wrapper">
                    <div v-for="item, index in swiperSlideList" :key="index" class="swiper-slide"
                        @click="jumpPage(item)">
                        <el-image style="width: 100%; height: 100%" :src="item.imgUrl" fit="fill"></el-image>
                    </div>
                </div>
                <div class="pagination">
                    <div class="title ellipsis">{{ title }}</div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="notice module">
                <div class="tagList">
                    <div class="tag" v-for="tag, index in navigationList" :key="index"
                        @click=" queryByNavigationId(tag.navigationId, index)">
                        <div class="label" :class="index == tagIndex ? 'tagActive' : ''">{{ tag.navigationName || '' }}
                        </div>
                        <div class="line" v-show="!(tagList.length == index + 1)"></div>
                    </div>
                    <div class="more" @click="more">
                        更多<i class="el-icon-arrow-right"></i>
                    </div>
                </div>
                <div class="tableList">
                    <div class="info" v-for="item, index in tableList" :key="index" @click="jumpPage(item)">
                        <div class="left">
                            <div class="point"></div>
                            <span class="label ellipsis">{{ item.title }}</span>
                        </div>
                        <div class="time">
                            {{ item.publishTime }}
                            <div v-show="$isToday(item.publishTime)" class="newInfo">new</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner" v-show="imgUrl">
            <el-image style="width: 100%; height: 100%" :src="imgUrl" fit="fill"></el-image>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
import homepageApi from '@/api/homepage';
import $baseUrl from '@/utils/baseURL';

export default {
    name: 'App',
    components: {},
    props: {
        imgUrl: {
            type: String,
            default: () => {
                return ""
            }
        }
    },
    data() {
        return {
            swiper: null,
            tagIndex: 0,
            url: require('../assets/announcement.png'),
            tagList: [],
            infoList: [],
            title: '',
            swiperSlide: []
        }
    },
    computed: {
        //避免样式崩塌，只获取前6个公告图片
        swiperSlideList() {
            return this.swiperSlide.slice(0, 6)
        },
        tableList() {
            return this.infoList.slice(0, 6)
        },
        navigationList() {
            return this.tagList.slice(0, 2)
        },
    },
    mounted() {
        this.queryCarouselChart();
        this.queryNavigation();
    },
    methods: {
        jumpPage(item) {
            console.log(item)
            if (item.jumpType == 'URL' && item.url) {
                window.open(item.url, '_blank');
            } else if (item.jumpType == 'ARTICLE' && item.articleId) {
                this.falg = item.articleId;
                this.jumpNavigation(item)
            }
        },
        jumpNavigation(item) {
            this.$router.push({
                path: '/navigation', query: {
                    articleId: item.articleId,
                    name: '文章'
                }
            })
        },
        more() {
            let data = this.navigationList[this.tagIndex]
            this.$router.push({
                path: '/navigationList', query: {
                    name: data.navigationName,
                    navigationId: data.navigationId
                }
            })
        },
        async queryNavigation() {
            let { data } = await homepageApi.queryNavigation()
            let tagList = data || [];
            tagList.sort(function (a, b) { return a.level - b.level; });
            tagList = this.groupById(tagList, 'level')
            console.log(tagList)
            if (tagList.length > 0) { this.tagList = tagList[0] } else { this.tagList = [] };
            if (tagList.length > 0) this.queryByNavigationId(this.tagList[0].navigationId);
        },

        groupById(arr, key) {
            if (!key) { return }
            return arr.reduce((acc, obj) => {
                // 查找是否已有该id的分组  
                let found = acc.find(group => group.some(item => item[key] === obj[key]));
                if (found) {
                    // 如果找到了，就将当前对象添加到该分组中  
                    found.push(obj);
                } else {
                    // 如果没有找到，就新建一个分组  
                    acc.push([obj]);
                }
                return acc;
            }, []);
        },
        async queryByNavigationId(navigationId, index = 0) {
            if (!navigationId) return;
            this.navigationId = navigationId
            this.tagIndex = index;
            let { data } = await homepageApi.queryByNavigationId(navigationId);
            this.infoList = data || []
        },
        async queryCarouselChart() {
            let { data } = await homepageApi.queryArticleCarouselChart()
            let list = data || [];
            this.swiperSlide = list.map(item => {
                return {
                    ...item,
                    imgUrl: `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${item.coverId}`
                }
            })
            //初始轮播插件
            this.$nextTick(() => {
                this.title = this.swiperSlide.length > 0 ? this.swiperSlide[0].title : ''
                this.createSwiper();
            });
        },
        //初始轮播插件 swiper的使用方式详见https://www.swiper.com.cn/api/index.html 
        createSwiper() {
            let that = this;
            this.swiper = new Swiper(".swiperList", {
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet: function (index, className) {
                        return '<div class="' + className + '"></div>';
                    },
                },
            });
            this.swiper.on('slideChange', function () {
                // 获取当前活动的下标（索引） 
                var activeIndex = this.activeIndex;
                that.getSwiperTitle(activeIndex);
            });
        },
        //获取指定下标下swiper的title
        getSwiperTitle(activeIndex = 0) {
            this.title = this.swiperSlide[Number(activeIndex)].title;
        },
    }
}
</script>

<style lang="scss" scoped>
.ellipsis {
    /* 设置你需要的宽度 */
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.announcement {
    width: 100%;
    margin-bottom: 20px;

    .banner {
        width: 100%;
        height: 70px;
        margin-top: 20px;
    }
}




.pagination {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 50px;
    padding: 0 10px;
    background-color: #00000098;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    z-index: 1;

    .title {
        width: 300px;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 10px;
        color: #ffffff;
        text-align: left;
    }
}

::v-deep .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background-color: #ffffff;
    border-radius: 0;
    opacity: 1;
    margin-left: 6px;
}

::v-deep .swiper-pagination-bullet-active {
    background-color: #164fa6;
}

.announcementMain {
    width: 100%;
    height: 270px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;

    .swiperList {
        background-color: #164fa6;
        overflow: hidden;
        position: relative;
    }

    .module {
        width: calc(50% - 10px);
        height: 100%;
        /* background-color: #cecece; */
    }
}

.announcementMain .notice .tagList {
    width: 100%;
    line-height: 40px;
    display: flex;
    border-bottom: 1px solid #cecece;
    position: relative;

}

.announcementMain .notice .more {
    position: absolute;
    right: 0;
    font-size: 14px;
    cursor: pointer;
}

.announcementMain .notice .tag {
    display: flex;
    align-items: center;
}

.announcementMain .notice .tag .label {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    height: 40px;
    border-bottom: 4px solid #1650a600;
    cursor: pointer;
}

.announcementMain .notice .tag .line {
    height: 18px;
    width: 1px;
    margin: 0 30px;
    background: #cecece;
}

.announcementMain .notice .tag:last-child .line {
    display: none;
}

.announcementMain .notice .tag .tagActive {
    color: #164fa6;
    border-bottom: 4px solid #164fa6;
}

.announcementMain .tableList {
    padding-top: 15px;
}

.announcementMain .tableList .info {
    width: 100%;
    border-bottom: 1px solid #cecece00;
    font-size: 14px;
    text-align: left;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;

    .time {
        width: 160px;
        text-align: right;
        position: relative;

        .newInfo {
            font-size: 10px;
            line-height: 14px;
            padding: 0 5px;
            border-radius: 7px;
            color: #ffffff;
            background-color: #035adc;
            right: 0;
            top: -6px;
            position: absolute;
        }
    }
}

.announcementMain .tableList .info:hover {
    transform: translate(-3px);
    border-bottom: 1px solid #e7e7e7;
}

.announcementMain .tableList .info .left {
    width: calc(100% - 165px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.announcementMain .tableList .info .left .point {
    width: 4px;
    height: 4px;
    background-color: #cecece;
    margin-right: 5px;
}

.announcementMain .tableList .label {
    width: 100%;
    color: #333333;
    font-weight: bold;
}
</style>